<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<head>
    <style>
        .locationmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-weight: 600;
            font-family: "PingFangSC-Regular";
        }
    </style>

    <title th:text="${name}"></title>

    <link
            href="https://css.mafengwo.net/css/cv/css+base:css+jquery.suggest:css+plugins:css+plugins+jquery.jgrowl:css+other+popup:css+mfw-header.2015^YlVS^1559526017.css"
            rel="stylesheet" type="text/css">

    <link href="https://css.mafengwo.net/css/cv/css+mdd+scenic-v2:css+mdd+mfw-reviews^YFI^1530619858.css"
          rel="stylesheet" type="text/css">

    <link href="https://css.mafengwo.net/css/mdd/mfw-reviews.css?1530619858" rel="stylesheet" type="text/css">
    <link rel="stylesheet" th:href="@{/asserts/css/tools/jquery.pagination.css}" />
    <link th:href="@{/asserts/css/tools/spop.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/asserts/css/common/comment.css}" rel="stylesheet" />

    <script th:inline="javascript">
        var longitude = [[${longitude}]];
        var latitude = [[${latitude}]];
        var title = [[${name}]];
        var sid = [[${sid}]];
        var uid = [[${session.user_id}]];
        var user = uid;
        var type = "3";
    </script>

    <script th:src="@{/asserts/js/common/jquery.js}"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=DmvaTbVhDI5FzcLmG8zcZQdPllicdMXQ"></script>
    <script th:src="@{/asserts/js/tools/jquery.pagination.min.js}"></script>
    <script th:src="@{/asserts/js/tools/spop.js}"></script>
    <script th:src="@{/asserts/js/common/comment.js}"></script>
    <script th:src="@{/asserts/js/poi/sight.js}"></script>



</head>

<body>

<div id="header" th:replace="~{homepage :: navbar}"></div>
<input id="user_id" th:value="${session.user_id}" type="hidden"/>
<input id="user_name" th:value="${session.user_name}" type="hidden"/>
<input id="user_pic" th:value="${session.user_logo}" type="hidden"/>
<input id="comment_count" th:value="${commentCount}" type="hidden"/>
<div class="row row-top">
    <div class="wrapper">
        <div class="extra">

            <!-- 收藏 S-->
            <div class="action _j_rside want-been">

                <a  th:class="${'_j_favpoi btn-collect' + (collectId eq null?'':' on')}" title="添加收藏">
                    <i class="icon"></i>
                    <span id="text-collect" th:text="${collectId eq null?'收藏':'已收藏'}" class="txt">收藏</span>
                </a>
            </div>
            <!-- 收藏 E-->
        </div>
        <!-- 面包屑 S-->
        <div class="crumb" data-cs-p="面包屑">
            <div class="item"><span class="hd"><a href="/travel-scenic-spot/mafengwo/10444.html"
                                                  style="text-decoration-line: none">目的地</a><em>&gt;</em></span></div>

            <div class="item">
                <div class="drop">
                    <span class="hd">
                        <a th:href="@{'/c/' + ${pid}}" th:text="${pname}">青岛</a>
                    </span>
                    <div class="bd"></div>
                </div>
                <em>&gt;</em>
            </div>
            <div class="item cur">景点</div>
        </div>
        <!-- 面包屑 E-->

        <!-- POI名称 S-->
        <div class="title">
            <h1 th:text="${name}">圣弥厄尔大教堂</h1>
        </div>
        <!-- POI名称 E-->

        <!-- 快捷导航 S-->
        <div style="height: 60px;">
            <div class="r-nav" id="poi-navbar" data-cs-p="快捷导航">
                <ul class="clearfix">
                    <li data-scroll="overview" class="on">
                        <a title="概况">概况</a>
                    </li>
                    <li data-scroll="commentlist" class="">
                        <a title="点评">点评<span>（<hhh th:text="${commentCount eq null?'0':commentCount}">2788</hhh>条）</span></a>
                    </li>
                    <li data-scroll="comment" class="nav-right">
                        <a class="btn-reviews" title="我要点评">我要点评</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 快捷导航 E-->

        <!-- 快捷导航滚动 s-->
        <script type="text/javascript">
            (function () {

                //导航
                var $navbar = $('#poi-navbar'),
                    offset_top,
                    $lis = $navbar.find("li").not('.nav-right');
                $('<div/>').insertBefore($navbar).append($navbar).height($navbar.outerHeight(true));
                $(function () {
                    offset_top = $navbar.offset().top;
                    $(window).bind('scroll.poinav', setFixed).trigger("scroll.poinav");
                });
                $(document).delegate("[data-scroll]", "click", function () {
                    scrollTo($(this));
                });
                function setFixed() {
                    var $rows = $('body >.container >[data-anchor]'),
                        scrolltop = $(document).scrollTop(),
                        h,
                        _lis = $lis.filter(":visible"),
                        currIndex;
                    if (scrolltop > offset_top) {
                        if (!$navbar.hasClass('fixed')) {
                            $navbar.addClass('fixed');
                        }
                        h = $navbar.outerHeight(true);
                        for (var $li, $row, top, i = 0, j = _lis.length; i < j; i++) {
                            $row = $rows.filter("[data-anchor=" + ($li = _lis.eq(i)).attr("data-scroll") + "]");
                            if ($row[0] && (top = $row.offset().top) && ( /*i == (j - 1) ||*/
                                    ((top - h <= scrolltop) && (top + $row.outerHeight() - h > scrolltop)))) {
                                currIndex = i;
                                break;
                            }
                        }
                        if (i == j) {
                            _lis.removeClass("on");
                        } else {
                            _lis.eq(currIndex || 0).addClass("on").siblings().removeClass("on");
                        }
                    } else {
                        if ($navbar.hasClass('fixed')) {
                            $navbar.removeClass('fixed');
                        }
                        _lis.eq(0).addClass("on").siblings().removeClass("on");
                    }
                }

                function scrollTo(target, pos) {
                    pos = target ? target.data('scroll') : pos;
                    var $target = $('[data-anchor=' + pos + ']'), top;
                    if ($target[0]) {
                        top = $target.offset().top;
                        if (top > offset_top) {
                            top -= $navbar.outerHeight();
                        }
                        $('html,body').animate({
                            scrollTop: Math.ceil(top)
                        }, 500);
                    }
                }

                $(function () {
                    if (location.hash) {
                        scrollTo(null, location.hash.replace(/^#/, ''));
                    }
                });





            })();
        </script>
        <!-- 快捷导航滚动 e -->
    </div>
</div>

<div data-anchor="overview">
    <div class="row row-picture row-bg" style="height: auto">
        <div class="wrapper">
            <a class="photo">
                <div class="bd" style="height: auto">
                    <div class="pic-big" style="width: 100%;">
                        <img th:src="${pic}" width="100%">
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- 简介 S -->
    <div class="mod mod-detail" data-cs-p="概况">
        <div class="summary" th:utext="${summary}">
            ·1930年建成，原名“圣弥厄尔教堂”，是青岛市区最大的罗马式建筑，也是中国唯一的祝圣教堂。<br>
            ·由德国设计师毕娄哈，依据哥德式和罗马式建筑风格设计而成。整体为砖石双塔建筑，内有四口大钟。<br>
            ·教堂内宽敞明亮，大厅高18米，两旁走廊立着两个供神甫接待信徒忏悔告解用的告解亭。 <br>
            ·教堂中有一架从德国进口价值不菲的管风琴，只有在主日弥撒时才会奏响。
        </div>

        <ul class="baseinfo clearfix">
            <li class="tel" th:if="${phone ne null}">
                <div class="label">电话</div>
                <div class="content" th:text="${phone}">0532-82865960</div>
            </li>
            <li class="item-site" th:if="${site ne null}">
                <div class="label">网址</div>
                <div class="content">
                    <a th:href="${site}" target="_blank" rel="nofollow" th:text="${site}">http://www.cnhhl.com/</a>
                </div>
            </li>
            <li class="item-time" th:if="${commendTime ne null}">
                <div class="label">用时参考</div>
                <div class="content" th:utext="${commendTime}">1小时以下</div>
            </li>
        </ul>

        <dl>
            <dt>交通</dt>
            <dd th:utext="${traffic}">乘坐地铁3号线到青岛站<br>
                乘坐6路、8路、221路等多路公交车到中国剧院站下车</dd>
        </dl>
        <dl>
            <dt>门票</dt>
            <dd>
                <div th:utext="${ticket}"> 普通票:10人民币 (1月1日-12月31日 周一-周日)<br>
                    半票:学生凭有效证件<br>
                    免票:1.2米以下儿童、65岁以上老人凭有效证件、周日08:00-09:00主日弥撒时免费。<br>
                </div>

            </dd>
        </dl>
        <dl>
            <dt>开放时间</dt>
            <dd>
                <div th:utext="${openTime}" style="max-height: none; overflow: initial;">08:00-17:00 (1月1日-12月31日 周一-周六)12:00-17:00
                    (1月1日-12月31日 周日)<br>
                    tips:<br>
                    每天06:00平日弥撒； <br>
                    周日08:00-09:00主日弥撒。<br>
                    教堂开放时间会有变动，建议以实际为准</div>
            </dd>
        </dl>

    </div>
    <!-- 简介 End -->

    <!-- 位置 S -->
    <div class="mod mod-location">
        <div class="mhd" style="overflow: hidden;">景点位置<p class="sub" th:utext="${position}">详细地名</p>
        </div>
        <div class="mbd clearfix">
            <div id="" class="pagelet-block">
                <div id="locationmap" style="width:600px;height:480px;border:#ccc solid 1px;"></div>
                <script>
                    // 百度地图API功能
                    //GPS坐标
                    var x = longitude;
                    var y = latitude;
                    var ggPoint = new BMap.Point(x, y);

                    //地图初始化
                    var bm = new BMap.Map("locationmap");
                    bm.centerAndZoom(ggPoint, 15);
                    bm.addControl(new BMap.NavigationControl());



                    //坐标转换完之后的回调函数
                    translateCallback = function (data) {
                        if (data.status === 0) {
                            var marker = new BMap.Marker(data.points[0]);
                            bm.addOverlay(marker);
                            bm.setCenter(data.points[0]);
                        }
                    }

                    setTimeout(function () {
                        var convertor = new BMap.Convertor();
                        var pointArr = [];
                        pointArr.push(ggPoint);
                        convertor.translate(pointArr, 3, 5, translateCallback)
                    }, 1000);

                </script>
            </div>
        </div>
    </div>

    <!-- 位置 End -->

    <!-- 评论列表 S  -->
    <div data-anchor="commentlist">
        <div id="pagelet-block-093eb3c89015ff4ba34f2c17176d8f8a" class="pagelet-block"
             data-api=":poi:pagelet:poiCommentListApi" data-params="{&quot;poi_id&quot;:&quot;2575&quot;}"
             data-async="1" data-controller="/js/poi/ControllerPoiComment">
            <div class="mod mod-reviews" data-cs-p="评论列表">
                <div class="mhd mhd-large">游游点评<span>（共有<em th:text="${commentCount eq null?'0':commentCount}">2788</em>条评价）</span></div>

                <div class="loading-img" style="display: none;"><img
                        src="http://images.mafengwo.net/images/weng/loading3.gif"> Loading...</div>
                <div class="_j_commentlist">
                    <div class="rev-list">
                        <ul id="comment-list">
                            <!--评论列表-->
                        </ul>
                    </div>
                </div>
                <div class="post_pagin" id="smallpager">
                    <div id="pagination" class="page f1" style="text-align: center;">
                    </div>
                </div>

            </div>


        </div>
    </div>
    <!-- 评论列表 End -->

    <!-- 评价 s -->
    <div data-anchor="comment">
            <div class="wrapper" id="_rank_wrapper">

                <div class="mfw-reviews">
                    <div id="_j_commentform_cnt">
                        <h2>
                            <strong th:text="${name}">茄子妙妙屋</strong>
                        </h2>
                        <div class="_j_commentdialogform" data-typeid="3">

                            <div class="review-item item-star">
                                <div class="label"><em>*</em>总体评价</div>
                                <div class="review-star _j_rankblock">
                                    <input type="hidden" name="rank" value="" data-inputname="总体评价">
                                    <span class="_j_starcount star0"></span>
                                    <div class="click-star _j_starlist">
                                        <a role="button" title="千万别去" rel="nofollow"></a>
                                        <a role="button" title="不推荐" rel="nofollow"></a>
                                        <a role="button" title="一般般" rel="nofollow"></a>
                                        <a role="button" title="值得一去" rel="nofollow"></a>
                                        <a role="button" title="必须推荐" rel="nofollow"></a>
                                    </div>

                                </div>
                                <span class="txt-tips _j_startip">点击星星打分</span>
                            </div>

                            <div class="review-item item-comment">
                                <div class="label"><em>*</em>评价</div>
                                <div class="content">
                                        <textarea class="_j_comment_content" name="comment"
                                                  data-inputname="点评内容" placeholder="写下你的评价"></textarea>
                                    <p class="_j_commentcounttip"></p>
                                </div>
                            </div>

                            <div class="review-item item-action">
                                <a class="btn-large _j_submit_comment" role="button" onclick="clickCommentSubmit()" title="提交点评">提交点评</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
    </div>
    <!-- 评价 e -->
</div>
</body>

</html>